<template>
    <div class="wrapper">
        <top-bar class="top-bar" :backgroundColor="'transparent'" :iconColor="'white'">
        </top-bar>
        <div class="container">
            <div class="container-bg"></div>
            <div class="container-main">
                <div class="content">
                    <div class="header">
                        <div class="img-wrapper"><img src="../../../assets/images/icon_app.png" alt=""></div>
                        <div class="title">{{vueState.versionControl.appName}} V{{vueState.versionControl.version}}</div>
                    </div>
                    <div class="footer">
                        <div class="email">
                            <div class="email-title">Email:</div>
                            <div class="email-link">service@backgardon.com</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { inject } from 'vue'
export default {
    setup(props) {
        const vueState = inject('vueState')
        return {
            vueState
        }
    }
}
</script>
<style lang="less" scoped>
.wrapper{
    height: 100%;
    .container{
        height: 100%;
        overflow-y: auto;
        background-color: #F5F6F9;
        &-bg{
            height:2.04rem;
            background: url(../../../assets/images/bg_about.svg) no-repeat center;
            background-size: contain;
        }
        &-main{
            height: calc(100% - 1.8rem);
            margin-top:-.24rem;
            padding: 0 .16rem;
            .content{
                background-color: white;
                height: 100%;
                border-radius: .16rem .16rem 0 0;
                padding: .32rem .16rem 0;
                &>.header{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .img-wrapper{
                        height: .64rem;
                        width: .64rem;
                        img{
                            display: block;
                            height: 100%;
                            width: 100%;
                        }
                    }
                    .title{
                        margin-top: .04rem;
                        font-size: .16rem;
                        font-weight: 700;
                        line-height: .28rem;
                        color:#f5b53f;
                    }
                }
                &>.footer{
                    margin-top: .28rem;
                    padding-bottom: .12rem;
                    border-bottom:.01rem solid #EDEDEF;
                    .email{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        &-title{
                            font-size: .16rem;
                            font-weight: 400;
                            line-height: .28rem;
                            color:#121314;
                        }
                        &-link{
                            font-size: .14rem;
                            font-weight: 500;
                            line-height: .24rem;
                            color:#4D94FF;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}
</style>